<template>
	<div class="destination">
		<h3>
			<p>当季目的地</p>
			<span>你朋友圈的旅游内容，我们包了</span>
			<label>更多<img src="../../../../public/myimg/right.png" /></label>
		</h3>
		<p>
			<button @click="idses=1" :class="{'selected':idses==1}">国内</button>
			<button @click="idses=2" :class="{'selected':idses==2}">出境</button>
		</p>
		<Destination1 v-if="idses==1"></Destination1>
		<Destination2 v-if="idses==2"></Destination2>
	</div>
</template>

<script>
	import Destination1 from './Destination1'
	import Destination2 from './Destination2'
	
	export default{
		name:'Destination',
		data(){
			return{
				idses:1
			}
		},
		components:{Destination1,Destination2}
	}
</script>

<style scoped>
	.destination{
		width: 96%;
		height: 7.5rem;
		padding: 0.2rem;
	}
	.destination h3{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.destination h3 p{
		font-size: 0.42rem;
		font-weight: bold;
	}
	.destination h3 span{
		font-size: 0.33rem;
		border-radius: 0.28rem;
		background: #fff3ea;
		color: #ff9e51;
		padding: 0.1rem 0.2rem;
	}
	.destination h3 label{
		font-size: 0.3rem;
		padding-left: 0.2rem;
	}
	.destination h3 label img{
		width: 0.15rem;
		padding-left: 0.1rem;
	}
	.destination p{
		padding: 0.1rem;
	}
	.destination p button{
		border: 0.01rem solid gainsboro;
		padding: 0.1rem;
		margin-left: 0.1rem;
		background: white;
		width: 2rem;
		border-radius: 0.5rem;
	}
	.selected{
		color: #ff9e51;
		font-weight: bold;
	}
</style>
